<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sql配置</title>
    <link href="/static/css/controls.css" rel="stylesheet"/>
    <link href="/static/css/engine.css" rel="stylesheet">
    <link href="/bower_components/bootstrap/css/bootstrap.css" rel="stylesheet">


    <script src="/bower_components/requirejs/require.js" data-main="/static/app.js"
            data-bootstrap-modules="'system2/component/validator/ValidatorModule'"></script>

</head>
<body ng-controller="ValidatorController" style="height: 480px">
<div id="showEdit" style="position:absolute ;right: -20px;top:0px; overflow: auto; height: 120%;width:900px;">
    <form name="ValidatorConfigForm"
          style="margin-left: 20px;background-color: #FFF;
          border-radius: 4px;
           width: 860px;
          box-shadow: 1px 1px 1px #0b0b0b;"
          data-invalid-msg="tooltipMessenger">
        <div class="row">
            <div class="col-md-6">
                <button type="button" style="background-color: #1a8bd9;" class="btn btn-default"
                        ng-click="save()">保存
                </button>
                <button type="button" style="background-color: #1a8bd9;" class="btn btn-default"
                        ng-click="back()">返回
                </button>
            </div>

        </div>
        <br>
        <div class="row">
            <div class="col-md-12" style=" min-height: 800px">
                <div class="form-group row">
                    <label class="col-md-2">校验器名称: </label>
                    <input type="text"  class="project-name" ng-model="validatorConfig.validatorName" >
                </div>
                <script type="text/ng-template" id="nodes_renderer.html">
                    <div class="tree-node tree-node-content" ng-click="selectNode(node,$event)">
                        <div class="row tree-node-content-title">
                            <a  role="functionArea" ng-if="node.nodes && node.nodes.length> 0" data-nodrag
                                ng-click="toggle(this)">
                                <span role="functionArea" ng-show="collapsed" style="font-size:22px;float: left;margin-top: 8px;margin-left: 18px;">&gt;</span>
                                <span role="functionArea" ng-show="!collapsed" style="float: left;margin-top: 8px;margin-left: 18px;">﹀</span>
                            </a>
                            <span style="color:rgb(188, 188, 188);float: left;margin-top: 10px;margin-left: 18px;" >{{node.nodeName}}</span>
                            <span>
                                <span class="btn_radius" style="float: left;margin-top: 8px;margin-left: 5px;" ng-if="node.configs.pattern">
                                    正则校验
                                </span>
                                <span class="btn_radius" style="float: left;margin-top: 8px;margin-left: 5px;" ng-if="node.configs.notEmpty">
                                    字段值非空校验
                                </span>
                                <span class="btn_radius" style="float: left;margin-top: 8px;margin-left: 5px;" ng-if="node.configs.length">
                                    长度校验
                                </span>
                                <span class="btn_radius" style="float: left;margin-top: 8px;margin-left: 5px;" ng-if="node.configs.range">
                                    范围校验
                                </span>
                                <span class="btn_radius" style="float: left;margin-top: 8px;margin-left: 5px;" ng-if="node.configs.require">
                                    字段非空校验
                                </span>
                            </span>
                            <a role="functionArea" class="pull-right tree-node-remove" data-nodrag ng-click="deleteNode(this)" style="margin-right: 18px;margin-top: 8px">
                                <img role="functionArea" src="/static/images/u8.svg"/>
                            </a>
                            <a  role="functionArea" class="pull-right  tree-node-add" data-nodrag ng-click="addNode(node)"
                                style="margin-right: 8px;margin-top: 8px">
                                <img role="functionArea" src="/static/images/u8.svg"/>
                            </a>
                        </div>
                        <div class="row tree-node-edit-content" ng-show="currentSelectNode==node"
                             style="background-color: #FFF;margin: 0px; border: 1px solid #eee; border-radius: 3px;box-shadow: 1px 1px 1px #888;">
                            <div class="col-md-12" style="padding:10px;">
                                <div class="row">
                                    <div class="col-md-6 form-horizontal">
                                        <div class="form-group">
                                            <label class="col-md-6 control-label">校验属性：</label>
                                            <div class="col-md-6">
                                                <input type="text" ng-model="node.nodeName" class="form-control"
                                                       placeholder="校验属性">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 form-horizontal">
                                        <div class="form-group">
                                            <label class="col-md-6 control-label">校验项：</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row" style="margin-left: 80px">
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <g-checkbox
                                                        ng-model="validPattern" on-check="validPatternCheck(validPattern)">
                                                </g-checkbox>
                                                <label>正则校验</label>
                                            </div>
                                            <div class="col-md-12" ng-if="validPattern">
                                                <div class="form-group">
                                                    <label class="col-md-4 control-label">正则表达式:</label>
                                                    <div class="col-md-8">
                                                        <input type="text" ng-model="validPatternSetting.pattern"
                                                               class="form-control" placeholder="正则表达式">
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <!--长度-->
                                        <div class="row">
                                            <div class="col-md-12">
                                                <g-checkbox
                                                        ng-model="validLength"
                                                        on-check="validLengthCheck(validLength)">
                                                </g-checkbox>
                                                <label>长度校验</label>
                                            </div>
                                            <div class="col-md-12" ng-if="validLength">
                                                <div class="form-group">
                                                    <label class="col-md-4 control-label">是否字节:</label>
                                                    <div class="col-md-8">
                                                        <g-checkbox ng-model="validLengthSetting.isByte">
                                                        </g-checkbox>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12" ng-if="validLength">
                                                <div class="form-group">
                                                    <label class="col-md-4 control-label">最小长度:</label>
                                                    <div class="col-md-8">
                                                        <input type="text" ng-model="validLengthSetting.minLength"
                                                               class="form-control" placeholder="最小长度">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12" ng-if="validLength">
                                                <div class="form-group">
                                                    <label class="col-md-4 control-label">最大长度:</label>
                                                    <div class="col-md-8">
                                                        <input type="text" ng-model="validLengthSetting.maxLength"
                                                               class="form-control" placeholder="最大长度">
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <g-checkbox
                                                        ng-model="validRequire" on-check="validRequireCheck(validRequire)">
                                                </g-checkbox>
                                                <label>字段非空校验</label>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <g-checkbox
                                                        ng-model="validNotEmpty" on-check="validNotEmptyCheck(validNotEmpty)">
                                                </g-checkbox>
                                                <label>字段值非空校验</label>
                                            </div>

                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <g-checkbox
                                                        ng-model="validRange" on-check="validRangeCheck(validRange)">
                                                </g-checkbox>
                                                <label>范围校验</label>
                                            </div>
                                            <div class="col-md-12" ng-if="validRange">
                                                <div class="form-group">
                                                    <label class="col-md-4 control-label">最小值:</label>
                                                    <div class="col-md-8">
                                                        <input type="text" ng-model="validRangeSetting.min" class="form-control"
                                                               placeholder="最小值">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12" ng-if="validRange">
                                                <div class="form-group">
                                                    <label class="col-md-4 control-label">最大值:</label>
                                                    <div class="col-md-8">
                                                        <input type="text" ng-model="validRangeSetting.max" class="form-control"
                                                               placeholder="最大值">
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    </div>
                    <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
                        <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'">
                        </li>
                    </ol>
                </script>
                <div>
                    <button style="background-color: #1a8bd9;" type="button" class="btn btn-default"
                            id="validatorAddNode" ng-click="addNode(data)">添加属性
                    </button>
                    <button style="background-color: #1a8bd9;" type="button" class="btn btn-default"
                            ng-click="expandAll()">展开所有
                    </button>
                    <button style="background-color: #1a8bd9;" type="button" class="btn btn-default"
                            ng-click="collapseAll()">折叠所有
                    </button>
                </div>
                <br/>
                <div ui-tree id="tree-root" style="width: 800px">
                    <ol ui-tree-nodes ng-model="data">
                        <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'"></li>
                    </ol>
                </div>
            </div>
        </div>
    </form>
</div>
</body>
</html>